{% extends "base.html" %}
{% load i18n %}

{% block extra_js %}
<script src="{{ STATIC_URL }}js/jquery.userprofile.js"></script>
{% endblock %}

{% block base_content %}
	<div class="container">	
		<div class="row">
			<div class="col-md-12">
				<!-- header -->
				<div class="page-header">
					<big>{% trans "User Profile" %}</big>
				</div>
				<!-- content -->
				<div class="email-active">
					{% if user.is_active %}
						<div class="alert alert-success">{% trans "E-mail address varified." %}</div>
					{% else %}
						<p><a class="btn btn-warning" href="/user/verify/"><i class="fa fa-envelope"></i> {% trans "Send Verification E-Mail." %}</a></p>
					{% endif %}
				</div>
				<!-- 
				TODO :
						1.show user detail: last name, first name, email, nick name(?) 
						2.collapse detail if already filled?
						3.show records if exist
						4.
				-->
				<div class="detail-info">
					<div class="panel-group" id="accordion">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4 class="panel-title">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
									{% trans "Profile" %}
									</a>
								</h4>
							</div>
							<div id="collapseOne" class="panel-collapse collapse in">
							  <div class="panel-body">
								{% include "component/user/profile-fieldset.html" %}
							  </div>
							</div>
						</div>
						<div class="panel panel-default">
							<div class="panel-heading">
								<h4 class="panel-title">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
										{% trans "Record statstic" %}
									</a>
								</h4>
							</div>
							<div id="collapseTwo" class="panel-collapse collapse">
							  <div class="panel-body">
							  </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}